<template>
  <div class="app-container" style="position: relative; height: calc(100vh - 117px)">
    <div class="container">
      <!--工具栏-->
      <div class="head-container">
        <!-- 搜索 -->
        <el-input
          v-model="query.value"
          clearable
          placeholder="输入搜索内容"
          style="width: 200px"
          class="filter-item"
          @keyup.enter.native="toQuery"
        />
        <el-select
          v-model="query.type"
          clearable
          placeholder="类型"
          class="filter-item"
          style="width: 130px"
        >
          <el-option
            v-for="item in queryTypeOptions"
            :key="item.key"
            :label="item.display_name"
            :value="item.key"
          />
        </el-select>
        <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
        <el-button
          type="danger"
          class="filter-item"
          size="mini"
          icon="el-icon-refresh"
          @click="toQuerys"
        >重置</el-button>
      
      </div>
      <el-table  ref="multipleTable" v-loading="loading" :data="data" size="small" style="width: 100%;" @selection-change="handleSelectionChange">
       <!--  <el-table-column :selectable="checkboxT" type="selection" width="50" /> -->
        <el-table-column prop="id" width="140" label="门店序号">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
           
          </template>
        </el-table-column>
         <el-table-column prop="retailUSer" width="200" label="店主姓名">
          <template slot-scope="scope">
            <span>{{ scope.row.retailUser }}</span>
           
          </template>
        </el-table-column>
           <el-table-column prop="image" label="门店照片">
         <template slot-scope="{ row }">
              <img :src="row.image" style="height: 50px" />
            </template> 
        </el-table-column>
        <el-table-column prop="name" label="门店名称">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="门店手机号码" />
        <el-table-column prop="address" label="地址" />
        <el-table-column prop="detailedAddress" label="详细地址" />
        <el-table-column label="操作" width="200" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button
              v-if="true"
              size="mini"
              type="primary"
              @click="handleToProduct(scope.row.id)"
            >
              门店进货</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-button
      v-show="retail_type==0||pemit==1"
          type="success"
          class="filter-item"
          size="mini"
          icon="el-icon-refresh"
          @click="centers"
        >平台进货</el-button>
    </div>
    <pList ref="list" :is-add="isAdd" />
    <!--添加订单打印及订单导出功能 2020.04.13 changxh-->
    <el-footer class="footer-contains">
      <!--分页组件-->
      <el-pagination
        :total="total"
        :current-page="page + 1"
        style="margin-top: 8px"
        layout="total, prev, pager, next, sizes"
        @size-change="sizeChange"
        @current-change="pageChange"
      />
    </el-footer>
  </div>
</template>

<script>
  import initData from '@/mixins/crud'
  import pList from './list'
  import {list} from '@/api/yxSystemStore'
 import Detail from "../products/detail";
export default {
    components: {pList,Detail},
    mixins: [initData],
  data(){
     return {
       query:{
          username:'',
          phone:'',
          address:''
       },
       multipleTable:[],
       centerss:-1,
       selectRetailId:0,
       loading:false,
        delLoading: false, retailId:0, username: '',retailType:JSON.parse(localStorage.getItem("SET_USER")).retailType, phone: '',address: '', checkList: [], printChecked: false, batchHandle: '', batchExport: '', listContent: [],
        queryTypeOptions: [
          { key: 'username', display_name: '店主姓名' },
          { key: 'phone', display_name: '门店电话' },
           { key: 'address', display_name: '门店地址' }
        ],
        statusOptions: [
          { value: '0', label: '未支付' },
          { value: '1', label: '未发货' },
          { value: '2', label: '待收货' },
          { value: '3', label: '待评价' },
          { value: '4', label: '交易完成' },
          // { value: '5', label: '待核销' },
          { value: '-1', label: '退款中' },
          { value: '-2', label: '已退款' },
          { value: '-4', label: '已删除' }
        ],
        typeOptions: [
        ],
        retail:{},
        handleOptions: [
          {value: '', label: '批量操作'},
          {value: '0', label: '批量打印'},
        ],
        exportOptions: [
          {value: '', label: '批量导出'},
          {value: '0', label: '导出全部'},
          {value: '1', label: '导出选中'},
        ],
        caculateInfo: {
          orderNum : 0,
          storeNum : 0,
          orderPrice : 0,
          userNum : 0,
        },
        pemit:0,
        retail_type:1,
        selectionId:0,
    };
  },
  created(){
    this.pemit=JSON.parse(localStorage.getItem("SET_USER")).pemit
    this.retail_type=JSON.parse(localStorage.getItem("SET_USER")).retailType
    if(retail_type==1){
        this.init()
    }
    
  },
    methods:{
      toQuerys(){
        this.query={}
        this.init()
      },
       handleSelectionChange(val) {
        this.checkList = val;
        if(val.length !=0 ){
          this.printChecked = true;
          let user = [];
          user = Array.from(new Set(user));
        }else {
          this.printChecked = false;
          this.clearCaculateInfo();
          // this.getCaculateInfo();
        }
      },
       batchSelection(val){
        let rows = this.data;
        if (val) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleToProduct(id){
        this.isAdd=true
        this.$refs.list.selectProduct(id)
        this.$refs.list.dialog=true
      
        
      },
      //选择框
      checkboxT(row, rowIndex) {
        return row.id !== 1
      },
      init(){
      this.toQuery()
      },
      toQuery(){  
        this.beforeInit()
        list(this.params).then(res=>{
          this.data=res.content
          this.total = res.totalElements
        })
      },
      handleSelectionChange(){
      },
      centers(){
         this.isAdd=true
        //查询商品根据id（平台id）
        this.$refs.list.selectProduct(this.centerss)
        this.$refs.list.dialog=true

      },
       beforeInit(url) {
        this.url = url
        const sort = 'id,desc'
        this.params = { page: this.page, size: this.size, sort: sort, username: this.username,retailId:this.retailId, phone: this.phone, address: this.address  }
        const query = this.query
        const type = query.type
        const value = query.value
        if (type && value) { this.params[type] = value }
        return true
      },
    }
  }

</script>
<style scoped lang="scss">
.header {
  margin-bottom: 20px;
}
.imgs {
  width: 100px;
}
.logistics {
  align-items: center;
  padding: 10px 0px;
  .logistics_img {
    width: 45px;
    height: 45px;
    margin-right: 12px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .logistics_cent {
    span {
      display: block;
      font-size: 12px;
    }
  }
}

.trees-coadd {
  width: 100%;
  height: 400px;
  border-radius: 4px;
  overflow: hidden;
  .scollhide {
    width: 100%;
    height: 100%;
    overflow: auto;
    margin-left: 18px;
    padding: 10px 0 10px 0;
    box-sizing: border-box;
    .content {
      font-size: 12px;
    }

    .time {
      font-size: 12px;
      color: #2d8cf0;
    }
  }
}

.title {
  margin-bottom: 10px;
  color: #17233d;
  font-weight: 500;
  font-size: 14px;
}

.description {
  &-term {
    display: inline-block;
    padding-bottom: 5px;
    line-height: 20px;
    width: 50%;
    font-size: 12px;
  }
  // /deep/ .el-divider--horizontal {
  //   margin: 12px 0 !important;
  // }
  >>> .el-divider--horizontal {
    margin: 12px 0 !important;
  }
}
>>> .tb .el-talbe_header .el-table-column--selection .cell .el-checkbox {
  display: none !important;
}
.box-card {
  height: 50px;
}
</style>
